import {Component} from "react"
import axios from "axios";
import {store} from "../../store"
import {setName} from "../../store/userReducer";
import "../../styles/importAntd.js"
import {Button} from "antd"
import "./index.scss"
// const Index = () => {
//     const {name, age} = useSelector(state => state.user);
//     const [isLoading,setIsLoading]=useState(false)
//     const dispatch = useDispatch()
//     const changeName = () => {
//         setIsLoading(true)
//         axios.get('/getName', {}).then(res => {
//             let {name} = res.data.result
//             dispatch(setName(name))
//             setIsLoading(false)
//         })
//     }
//     return (
//         <div>
//             <div>
//                 <p >姓名：{name}
//                     <Button onClick={changeName} type="success" loading={isLoading}> 修改姓名</Button>
//                 </p>
//                 <p>年龄：{age}</p>
//             </div>
//         </div>
//     );
// }
// export default Index;

class Index extends Component {
    state = {
        isLoading: false,
        anim: null,
    }

    componentDidMount () {
    }

    changeName = () => {
        this.setState({isLoading: true})
        axios.get('/getName', {}).then(res => {
            let {name} = res.data.result;
            store.dispatch(setName(name))
            this.setState({isLoading: false})
        })
    }
    getJson = () => {
        axios.get('../../../static/json/css1.json', {}).then(res => {
            let data = res.data;
            let params = {
                container: document.getElementById('lottie'),
                renderer: 'svg',
                loop: true,
                autoplay: false,
                animationData: data//变量名（json的要一致）
            };
            let anim=lottie.loadAnimation(params);
            anim.play();
        })
    }

    render () {
        let {isLoading} = this.state
        let {name, age} = store.getState().user || {}
        return (
            <div>
                <div>
                    <p>姓名：{name}
                        <Button onClick={this.changeName} type="success" loading={isLoading}> 修改姓名</Button>
                    </p>
                    <p>年龄：{age}</p>
                </div>
                <div>
                    <Button onClick={this.getJson} type="success"> 获取JSON数据</Button>
                </div>
                <div className="top-content">
                    <div id="lottie">

                    </div>
                </div>
            </div>
        );
    }
}

export default Index